<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8">
		<title>JTOPO直线单向流动动画</title>
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
		<script src="jtp/jtopo-0.4.8-min.js" type="text/javascript"></script>	
		
	</head>
	<body>
			<canvas width="800"height="500"id="canvas"style=" background-color:#EEEEEE; border:1px solid #444;">
			</canvas>
	</body>
</html>
<script type="text/javascript">
	CanvasRenderingContext2D.prototype.JtopoDrawPointPath=function(a,b,c,d,e,f){
		debugger;
					 var animespeed=(new Date())/10;
					var xs=c- a,
						xy=d- b,
						l = Math.floor(Math.sqrt(xs * xs + xy * xy)),
							colorlength=50,
							j=l;
						xl=xs/ l,
					    yl=xy/l;
					 var colorpoint=animespeed%(l+colorlength)-colorlength;
for(var i=0;i<j;i++){
						 if(((i)>colorpoint)&&((i)<(colorpoint+colorlength))){
							 this.beginPath();
							 this.strokeStyle=e;
							 this.moveTo(a+(i-1)*xl,b+(i-1)*yl);
							 this.lineTo(a+i*xl,b+i*yl);
							 this.stroke();
						 }else{
							 this.beginPath();
							 this.strokeStyle=f;
							 this.moveTo(a+(i-1)*xl,b+(i-1)*yl);
							 this.lineTo(a+i*xl,b+i*yl)
							 this.stroke();
						 }
					 }
				 };
            	var canvas = document.getElementById('canvas'); //舞台           
            	var stage = new JTopo.Stage(canvas);//场景
            	var scene = new JTopo.Scene(stage);

            	var node = new JTopo.Node("Hello");                            
            	node.setLocation(10, 10);
            	scene.add(node);
				
            	var node2 = new JTopo.Node("Hello");                            
            	node2.setLocation(400, 200);
            	scene.add(node2);
				var link1=new JTopo.Link(node,node2);
				 link1.PointPathColor="rgb(255,255,0)";
				 link1.strokeColor="255,0,255";
link1.paintPath = function(a, b) {
            if (this.nodeA === this.nodeZ) return void this.paintLoop(a);
            a.beginPath(),
            a.moveTo(b[0].x, b[0].y);
            for (var c = 1; c < b.length; c++) {

                null == this.dashedPattern ? (
                    (null==this.PointPathColor?a.lineTo(b[c].x, b[c].y):a.JtopoDrawPointPath(b[c - 1].x, b[c - 1].y, b[c].x, b[c].y, a.strokeStyle,this.PointPathColor))
                ) : a.JTopoDashedLineTo(b[c - 1].x, b[c - 1].y, b[c].x, b[c].y, this.dashedPattern)
            };
            if (a.stroke(), a.closePath(), null != this.arrowsRadius) {
                var d = b[b.length - 2],
                e = b[b.length - 1];
                this.paintArrow(a, d, e)
            }
        }
				scene.add(link1)
			


</script>